<template>
    <div>
        <div class="player">
            <div class="name">{{ text }}</div>
            <table>
                <tr class="trcolor">
                    <td style="color: red;">王</td>
                    <td>王</td>
                    <td>2</td>
                    <td>A</td>
                    <td>K</td>
                    <td>Q</td>
                    <td>J</td>
                    
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr class="trcolor">
                    <td>10</td>
                    <td>9</td>
                    <td>8</td>
                    <td>7</td>
                    <td>6</td>
                    <td>5</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
            <div class="shengyu">
                <button @click="reduce">-</button>
                <span>{{ num }}</span>
                <button @click="add">+</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:["text","isColor"],
        data(){
            return {
               num:36
            }
        },
        mounted(){
            
        },
        methods:{
            reduce(){
                this.num--
            },
            add(){
                this.num++
            }
        }
    }
</script>

<style lang="less" scoped>
.red{
    border: 4px solid red;
}
.player{
    width: 340px;
    height: 150px;
    background-color: aqua;
    position: relative;
    .name{
        text-align: center;
        font-size: 20px;
    }
    table{
        text-align: center;
        tr{
            td{
                height: 28px;
                width: 24px;
                border: 1px solid black;
            }
        }
    }
    .shengyu{
        position: absolute;
        right: 10px;
        top: 40%;
        button{
            width: 24px;
            height: 40px;
            font-size: 24px;
        }
        span{
            width: 24px;
            height: 40px;
            margin: 0 5px;
        }
    }
}
</style>